<template>
	<view class="aiWriting_box">
		<!-- 顶部背景图 -->
		<view class="topbgimg">
			<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/website/img/webxzy/twoxze_7.png" mode=""></image>
		</view>
		<view class="toptitle">文本开头<view class="symbol">*</view>
		</view>
		<view class="content">
			<view class="textarea">
				<u-textarea height="600rpx" maxlength="5000" v-model="writing" border="false"
					placeholderClass="placeClass" placeholder="请输入您的文章">
				</u-textarea>
			</view>
			<view class="tools">
				<view class="tools_left">
					<view class="left" @click="delWriting">
						<u-icon name="trash" size="18" color="#999999"></u-icon>
						<text class="text">清除文本</text>
					</view>
					<view class="right" @click="goSave">
						<text class="text">历史记录</text>
					</view>
				<!-- 	<view class="right" @click="goTextDetection(writing)">
						<text class="text">敏感词检测</text>
					</view> -->
				</view>
				<view class="tools_right">
					<text class="text">字数 {{writing.length}}</text>
				</view>
			</view>
		</view>

		<!-- 案例 -->
		<view class="example">
			<image class="example-img" src="../../static/new/example.png" mode=""></image>
			<view class="example-line"></view>
			<u-notice-bar :icons="false" direction="column" mode="link" :text="list" bgColor="#ffffff" color="#333333"
				@click="checkExample()"></u-notice-bar>
		</view>

		<view class="textnuminput">
			<input v-model="textNum" type="number" placeholder="请输入续写字数,最多600字">
		</view>

		<view class="warning-tips">
			温馨提示：仅支持输入汉字、数字及标点符号
		</view>

		<view class="button">
			<view class="button_right">
				<u-button text="文本续写" color="#5A91FF" size="large" @click="highOriginal"></u-button>
			</view>
		</view>
		<!--  进度条  -->
		<view class="schedule-page" v-if="scheduleShow">
			<view class="schedule-box">
				<view class="schedule-text">创作中，请稍后</view>
				<view class="lineBox">
					<view class="lineAnimation" v-for="(item,index) in arrIndex" :key="index"
						:style="{'width':item.width+'%'}">
						<view v-if="item.widthChildren>0" class="lineAnimation-children"
							:style="{'width':item.widthChildren+'%'}"></view>
					</view>
				</view>
				<view class="schedule-number">{{schedule}}%</view>
			</view>
		</view>

		<view style="width: 100%; height: 31rpx;background-color: #ffffff;"></view>
		<!-- 非会员看广告提示 -->
		<u-modal :show="vipShow" :title="'温馨提示'" :content="content" cancelText="取消" confirmText="去开通"
			showCancelButton="true" @cancel="cancel" @confirm="govip" :closeOnClickOverlay="true"
			@close="vipShow = false"></u-modal>
	</view>
</template>

<script>
	import {
		isLogin,
		vipType
	} from '@/business/login.js';
	import {
		wxTextDetection
	} from "../../utils/textCheck.js";
	import {
		wycUrl,
		wycUrlApi
	} from '@/api/assemb.js'
	import {
		apiMixUrlApi
	} from "../../api/assemb";
	var diff = require('diff');
	let app = getApp();
	export default {
		data() {
			return {
				isVip: false,
				content: '您还不是会员,此功能需开通会员才可使用。',
				writing: '',
				creativeResults: '',
				compareResults: [],
				vipShow: false,
				frequency: uni.getStorageSync('frequency'),
				aiLevel: 1,
				originality: 0,
				width: 0,
				arrIndex: [],
				widthIndex: 0,
				schedule: 0,
				scheduleShow: false,
				textNum: '',
				list: [
					'我正在看电视新闻，忽然间一丝反常景象在我视野边缘一闪而过。我朝阳台的落地窗走去。但是，不管刚才有什么事发生，我都已经错过了。今晚的月亮亮得出奇。我看着月亮，露出了微笑，然后返身回到电视前。约翰尼卡森的脱口秀刚刚开始。',
					'我小时身体弱，不能跟着野蛮的孩子们一块儿玩。我母亲也不准我和他们乱跑乱跳。小时不曾养成活泼游戏的习惯，无论在什么地方，我总是文绉绉的.',
					'韩语乔从小就是个有些男性化的女孩子，长大后一直走衰运的她忽然转运!最热门的偶像组合SWORD邀请她加入，可是……不幸的是……他们要语乔扮演的居然是一个--男孩子!'
				]
			};
		},
		onShow() {
			this.isVip = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;
			// this.isVip = true;
		},
		onLoad(options) {
			//接收app传过来的df并将本地的df替换（新增）
			console.log(options.df, '=111111111111')
			if (options.df) {
				const baseinfo = uni.getStorageSync('baseinfo')
				baseinfo.df = options.df
				uni.setStorageSync("baseinfo", baseinfo)

			} else {
				return
			}

			this.frequency = uni.getStorageSync('frequency') || 3
			if (this.frequency != 1 && this.frequency != 2) {
				uni.setStorageSync('frequency', 3)
			} else {

			}
		},
		methods: {
			goSave() {
			uni.navigateTo({
					url: '../save/save'
				})
			},
			highOriginal() {
				let params = {
					"content":this.writing,
					'promptId': 30,
					'conditions': [this.textNum]
				}
			   let param = encodeURIComponent(JSON.stringify(params));
				if (this.writing.trim() == '') {
					uni.showToast({
						title: '请输入文案',
						duration: 2000,
						icon: 'none'
					});
				} else if (uni.getStorageSync('frequency') > 0 || this.isVip) {
					wxTextDetection(this.writing).then((res1) => {
						if (res1.isItPass) {
							uni.navigateTo({
								url: '../creat/creat?param=' + param
							})
						}
					})
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '您还不是会员，请开通会员后使用',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								NationalVip()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				
			},
			// 选择示例
			checkExample(index) {
				this.writing = this.list[index];
				if (index == 1) {
					this.textNum = 500
				} else {
					this.textNum = 600
				}
			},
			/**
			 * 跳转充值页面
			 */
			govip() {
				this.vipShow = false;
				if (uni.getStorageSync('OS') !== 'ios') {
					uni.navigateTo({
						url: '/pages/paymentCenter/paymentCenter'
					});
				} else {
					uni.switchTab({
						url: '/pages/my/my'
					});
				}
			},
			cancel() {
				this.vipShow = false;
				// 用户触发广告后，显示激励视频广告
				// if (videoAd) {
				// 	videoAd.show().catch(() => {
				// 		// 失败重试
				// 		videoAd
				// 			.load()
				// 			.then(() => videoAd.show())
				// 			.catch(err => {
				// 				console.log('激励视频 广告显示失败');
				// 			});
				// 	});
				// }
			},
			//敏感词检测
			delWriting() {
				this.writing = ''
			},
		}
	}
</script>

<style lang="scss">
	/deep/.u-textarea--disabled {
		background-color: #fff !important;
	}

	/deep/.u-textarea {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/deep/.u-button {
		border-radius: 50rpx !important;
	}

	/deep/.u-icon__icon {
		margin-right: 8rpx !important;
	}

	/deep/.u-checkbox__icon-wrap {
		width: 26rpx !important;
		height: 26rpx !important;
		margin-left: 57rpx;
	}

	/deep/.u-textarea .u-textarea__field {
		line-height: 25px;
	}

	/deep/.u-textarea.data-v-09988a29 {
		background: rgba(0, 0, 0, 0) !important;
	}

	.textarea-placeholder {
		line-height: 30rpx;
	}

	.title {
		line-height: 111rpx;
		margin-left: 268rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		color: #5490FF;
	}

	.result_comparison {
		margin-top: 31rpx;
		margin-bottom: 20rpx;
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 18rpx;

		.results_textarea {
			padding: 0 20rpx 20rpx 20rpx;
		}
	}


	.creative_results {
		padding-bottom: 30rpx;
		margin-top: 20rpx;
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		box-sizing: border-box;

		.creative_results_btn {
			margin: auto;
			margin-top: 30rpx;
			width: 333rpx;
		}

	}

	.originality {
		margin-top: 64rpx;

		ul {
			display: flex;

			li {
				display: flex;
				width: 193rpx;
				height: 43rpx;
				font-size: 18rpx;

				.left {
					width: 102rpx;
					height: 43rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 43rpx;
					border-radius: 6rpx 0rpx 0rpx 6rpx;
				}

				.right {
					width: 92rpx;
					height: 43rpx;
					color: #333333;
					text-align: center;
					line-height: 43rpx;
					background-color: #fff;
					border-radius: 0rpx 6rpx 6rpx 0rpx;
				}
			}
		}
	}

	.button {
		margin-top: 62rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.button_left {
			width: 47%;
		}

		.button_right {
			position: relative;
			width: 100%;

			.right_other {
				display: flex;
				align-items: center;
				position: absolute;
				top: -21rpx;
				right: 0;
				width: 154rpx;
				height: 42rpx;
				background: #FF6600;
				border-radius: 21rpx 0rpx 0rpx 21rpx;

				text {
					line-height: 42rpx;
					margin-left: 18rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
		}
	}

	.textarea {
		padding-top: 15rpx;
	}

	.text {
		font-size: 19rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.aiWriting_box {
		.topbgimg {
			position: absolute;
			width: 100%;
			height: 230rpx;
			top: 0;
			left: 0;
			z-index: -1;

			image {
				width: 100%;
				height: 100%;
			}
		}

		margin: 0 27rpx;

		.toptitle {
			margin-top: 30rpx;
			display: flex;
			align-items: center;

			.symbol {
				color: red;
				margin-left: 6rpx;
			}
		}

		.content {
			width: 696rpx;
			border-radius: 18rpx;
			background-color: #fff;
			margin-top: 20rpx;
		}

		.tools {
			height: 80rpx;
			padding: 0 27rpx;
			display: flex;
			justify-content: space-between;

			.tools_left {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.right {
					margin-left: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.tools_right {
				display: flex;
				align-items: center;
			}
		}
	}

	.example {
		width: 700rpx;
		height: 97rpx;
		margin: 30rpx auto;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		box-shadow: 0rpx 1rpx 31rpx 0rpx #EEEEEE;

		.example-img {
			width: 54rpx;
			height: 54rpx;
			margin-left: 24rpx;
			margin-right: 30rpx;
		}

		.example-line {
			width: 5rpx;
			height: 33rpx;
			background-color: #333333;
			margin-right: 22rpx;
		}

		.example-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 25rpx;
			color: #333333;
		}

		.example-right {
			position: absolute;
			right: 26rpx;
		}
	}
</style>
<style>
	page {
		background-color: #FFFFFF;
	}

	.schedule-page {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: rgba(128, 126, 126, 0.8);
		top: 0px;
		left: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 200;
	}

	.schedule-box {
		width: 82%;
		background-color: #fff;
		border-radius: 15rpx;

	}

	.schedule-text {
		text-align: center;
		line-height: 120rpx;
	}

	.schedule {
		width: 100%;
		height: 20rpx;
		margin: 20rpx 0rpx;
	}

	.schedule-number {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #2979ff;
	}

	.lineBox {
		width: 90%;
		display: flex;
		justify-content: space-around;
		margin: 0px auto;
		height: 12rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.lineAnimation {
		height: 100%;
		background-color: #bbb9b9;
	}

	.lineAnimation-children {
		height: 100%;
		transition: all 0.5s;
		background-color: #2979ff;
	}

	.textnum {
		font-size: 26rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.textnuminput {
		padding: 30rpx 20rpx;
		font-size: 27rpx;
		background: #F5F8FF;
		border-radius: 10rpx;
	}

	.warning-tips {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin-top: 30rpx;
		margin-left: 20rpx;
	}
</style>